@import "mixin.scss";
body{
	font-family: 微软雅黑;
}
#wrap{
	background:url(../image/shop/bg.png);
	width:100%;
	height:1545px;
}
//设置整体
#box{
	width: 90%;
 	// margin-left: 65px;
 	background: #fff;
 	// overflow:hidden;
 	margin:0 auto;
}
//设置上边盒子
#top-box{
	width:95%;
	margin:0 auto;
	padding-top:20px;
	// margin-left:30px;

}
//设置按钮
#collapse{
	z-index:9999;
	position: fixed;
	right:-284.5px;
	transition:1s all ease;
	.toggle{
		display:none;
		width: 40px;
		height: 39px;
		background: #ea84ba;
		position: absolute;
		top: 55px;
		left:-40px;
		cursor: pointer;
		opacity: 0.9;
		ul{
			margin-top:10px;
			margin-left:9px;
			li{
				width: 22px;
				height: 3px;
				margin-bottom: 5px;
				background: #fff;
			}
		}
		
	}
	.collapse-nav{
		width:284.5px;
		height: 528px;
    	background: #ea84ba;
    	opacity: 0.9;
    	ul{
    		margin:0 8%;
    		li{
    			border-bottom:1px solid #fff;
    			height:52px;
    			line-height:52px;
    			font-size:16px;
    			a{
    				color:#fff;
    			}
    		}
    	}
	}
}
#collapse.active{
	right:0;
	transition:1s all ease;
}


//设置左边标题
header{
	position:fixed;
	width:15.15%;
	#logo{
		.logo1{
			display:block;
			margin-bottom:10px;
			img{
				width:100%;
			}
		}
		.logo2{
			display:block;
			margin-bottom:20px;
			img{
				width:100%;
			}
		}
	}
	#nav{
		ul{
			margin-bottom:20px;
			li{
				border-bottom:1px solid #eee;
				height:40px;
				line-height:40px;
				// navBg ($width,$url,$left,$pLeft)
				.first-page{
					@include navBg(url(../image/shop/first-page.png) no-repeat,11px,26px);
				}
				.first-page:hover{
					@include navBg(url(../image/shop/first-pageh.png) no-repeat,11px,26px);
				}
				.recommend{
					@include navBg(url(../image/shop/recommend.png) no-repeat,14px,23px);
				}
				.recommend.active{
					@include navBg(url(../image/shop/recommendh.png) no-repeat,14px,23px);
					color:#ea84ba;
				}
				.store{
					@include navBg(url(../image/shop/store.png) no-repeat,12px,26px);
				}
				.store:hover{
					@include navBg(url(..image/shop/storeh.png) no-repeat,12px,26px);
				}
				.trend{
					@include navBg(url(../image/shop/trend.png) no-repeat,12px,26px);
				}
				.trend.active{
					@include navBg(url(../image/shop/trendh.png) no-repeat,12px,26px);
					color:#ea84ba;
				}
				.creative{
					@include navBg(url(../image/shop/creative.png) no-repeat,12px,24px);
				}
				.creative:hover{
					@include navBg(url(../image/shop/creativeh.png) no-repeat,12px,24px);
				}
				.diy{
					@include navBg(url(../image/shop/diy.png) no-repeat,12px,26px);
				}
				.diy.active{
					@include navBg(url(../image/shop/diyh.png) no-repeat,12px,26px);
					color:#ea84ba;
				}
				.health{
					@include navBg(url(../image/shop/health.png) no-repeat,11px,26px);
				}
				.health.active{
					@include navBg(url(../image/shop/healthh.png) no-repeat,11px,26px);
					color:#ea84ba;
				}
				.plan{
					@include navBg(url(../image/shop/plan.png) no-repeat,12px,25px);
				}
				.plan:hover{
					@include navBg(url(../image/shop/planh.png) no-repeat,12px,25px);
				}
			}
			li:hover{
				border-left:1px solid #eee;
			}
			.page-li{
				border-top:1px solid #eee;
			}
			.recommend-li,.trend-li,.diy-li,.health-li{
				position:relative;
			}
			// 选项卡
			.recommend-option{
				display:none;
				font-size:14px;
				position:absolute;
				z-index:100;
				// border:1px solid #eee;
				background:#fff;
				width: 47%;
    			border-left: none;
    			top:-2%;
   				left:99.5%;
   			
				li{
					height:40px;
					line-height:40px;
					text-align:center;
					border-bottom:none;
					border-left:1px solid #eee;
					border-right:1px solid #eee;
				}
				li:first-child{
   					border-left:none;
   					border-top:1px solid #eee;
   				}
   				li:last-child{
   					border-bottom:1px solid #eee;
   				}
			}
			.trend-option{
				@extend .recommend-option;
			}
			.diy-option{
				@extend .recommend-option;
			}
			.health-option{
				@extend .recommend-option;
			}
		}
		.attention{
			width:100%;
			a{
				display:inline-block;
				width:21.5%;
				height:41px;
			}
			.weibo{
				background:url(../image/shop/weibo.png) no-repeat;
				background-size:contain;
			}
			.weibo:hover{
				background:url(../image/shop/weiboh.png) no-repeat;
				background-size:contain;
			}
			.weixin{
				background:url(../image/shop/weixin2.png) no-repeat;
				background-size:contain;
				position:relative;
			}
			.weixin:hover{
				background:url(../image/shop/weixinh.png) no-repeat;
				background-size:contain;
			}
			.douban{
				background:url(../image/shop/douban.png) no-repeat;
				background-size:contain;
			}
			.douban:hover{
				background:url(../image/shop/doubanh.png) no-repeat;
				background-size:contain;
			}
			.taobao{
				background:url(../image/shop/taobao.png) no-repeat;
				background-size:contain;
				margin-right:0;
				position:relative;
			}
			.taobao:hover{
				background:url(../image/shop/taobaoh.png) no-repeat;
				background-size:contain;
				margin-right:0;
			}

			//选项卡
			img{
				display:none;
				position:absolute;
				top:-165%;
				cursor:default;
			}
			.wei-img{
				left:350%;
				
			}
			.tao-img{
				left:140%;
			}
			
		}
	} 


}

//设置右边内容
section{
	width:80.17%;
	padding:0;
	.top{
		width:100%;
		border-bottom:1px dotted #ea84ba;
		.t-img{
			background:url(../image/shop/top.jpg) no-repeat;
			height:80px;
			margin-bottom:25px;
		}
		ul{
			margin-bottom:13px;
			li{
				float:left;
			}
			li:nth-child(1),li:nth-child(3){
				color:#999;
				margin:0 5px;
			}
			li:nth-child(2){
				color:#666;
			}
			li:nth-child(3){
				img{
					margin-right:5px;
				}
			}
		}
	}
	.content{
		margin-top:15px;
		.content-top{
			margin-bottom:25px;
			.list{
				b{
					font-size:17px;
					color:#ea84ba;
				}
				span{
					font-size:12px;
					color:#999;
					margin-left:10px;
				}
			}
			.share{
				margin-top: 2px;
				.b-more{
					display:inline-block;
					position:relative;
					dl{
						display:none;
						position:absolute;
						// height:270px;
						width:240px;
						border:1px solid #ccc;
						dt{
							height:25px;
							background:#f2f2f2;
							border-bottom:1px solid #e5e5e5;
							font-size:14px;
							font-weight:bold;
							line-height:25px;
							padding-left:5px;
						}
						.d-middle{
							background:#fff;
							border-bottom:1px solid #e5e5e5;
							ul{
								margin-top:3px;
								margin-left:5px;
								float:left;
								li{
									width:112px;
									height:24px;
									margin:2px 1px;
								
									a{
										height:16px;
										line-height:16px;
										margin-top:4px;
										margin-left:3px;
									}
									a:hover{
										color:#000;
									}
								}
								li:hover{
									background:#f2f2f2;
									border:1px solid #e5e5e5;
								}
							}
							.d-middle-right{
								margin-left:0;
							}
							.d-weinxin{
								background:url(../image/shop/share-content.png) 0 0;
							}
							.d-url{
								background:url(../image/shop/share-content.png) 0 -28px;
							}
							.d-friend{
								background:url(../image/shop/share-content.png) 0 -56px;
							}
							.d-renren{
								background:url(../image/shop/share-content.png) 0 -84px;
							}
							.d-book{
								background:url(../image/shop/share-content.png) 0 -113px;
							}
							.d-feixin{
								background:url(../image/shop/share-content.png) 0 -140px;
							}
							.d-twitter{
								background:url(../image/shop/share-content.png) 0 -170px;
							}
							.d-share{
								background:url(../image/shop/share-content.png) 0 -197px;
							}
							.d-weibo{
								background:url(../image/shop/share-content.png) -112px 0;
							}
							.d-email{
								background:url(..image/shop/share-content.png) -112px -31px;
							}
							.d-zone{
								background:url(../image/shop/share-content.png) -112px -55px;
							}
							.d-happy{
								background:url(../image/shop/share-content.png) -112px -84px;
							}
							.d-link{
								background:url(../image/shop/share-content.png) -112px -112px;
							}
							.d-douban{
								background:url(../image/shop/share-content.png) -112px -139px;
							}
							.d-facebook{
								background:url(../image/shop/share-content.png) -112px -168px;
							}
							.d-more{
								background:url(../image/shop/share-content.png) -112px -196px;
							}
						}
						.d-bottom{
							height:17px;
							line-height:17px;
							background:#f2f2f2;
							img{
								margin-left:172px;
							}
							a{
								padding-left:3px;
							}
						}
					}
				}
				a{
					display:inline-block;
					margin-right:10px;
					padding-left:20px;
				}
				.s-qq{
					background:url(../image/shop/qq-zone.png) no-repeat;
				}
				.s-weibo{
					background:url(../image/shop/weibo2.png) no-repeat;
				}
				.s-tencent{
					background:url(../image/shop/tencent.png) no-repeat;
				}
				.s-weixin{
					background:url(../image/shop/weixin3.png) no-repeat;
				}
				.s-more{
					background:url(../image/shop/more.png) no-repeat;
				}
				.s-visit{
					background:url(../image/shop/visit.png) no-repeat;
					margin-right:0;
					padding-left:6px;
					width:36px;
					height:16px;
				}
			}
		}
		
		.ele{
			ul{
				margin-bottom:20px;
				li{
					
					margin-top: 14px;
					margin-right: 1.61%;
					width: 31.72%;
					float:left;
					div{
						width:63.01%;
						float:right;
						h1{
							font-size:14px;
							margin-bottom:5px;
							margin-top:3px;
						}
						h2{
							overflow:hidden;
							height:35px;
							font-size:12px;
							margin-bottom:5px;
							color:#bbb;
							line-height:17px;
						}
						h3{
							font-size:12px;
							a{
								color:#ea84ba;
							}
						}
					}
					.new{
						float:left;
						width:33.89830508474576%;
						display:block;
						float:left;
						height:100px;
						overflow:hidden;
						background:url(../image/shop/new1.jpg) no-repeat;
						background-size:contain;
					}
					.mix{
						@extend .new;
						background:url(../image/shop/mix.jpg) no-repeat;
						background-size:contain;
					}
					.vintage{
						@extend .new;
						background:url(../image/shop/vintage.jpg) no-repeat;
						background-size:contain;
					}
					.normocore{
						@extend .new;
						background:url(../image/shop/normocore.jpg) no-repeat;
						background-size:contain;
					}
					.nature{
						@extend .new;
						background:url(../image/shop/nature.jpg) no-repeat;
						background-size:contain;
					}
					.jp{
						@extend .new;
						background:url(../image/shop/jp.jpg) no-repeat;
						background-size:contain;
					}
					.originaldesign{
						@extend .new;
						background:url(../image/shop/originaldesign.jpg) no-repeat;
						background-size:contain;
					}
					.korea{
						@extend .new;
						background:url(../image/shop/korea.jpg) no-repeat;
						background-size:contain;
					}
					.boyfriend{
						@extend .new;
						background:url(../image/shop/boyfriend.jpg) no-repeat;
						background-size:contain;
					}
					.child{
						@extend .new;
						background:url(../image/shop/child.jpg) no-repeat;
						background-size:contain;
					}
					.hot{
						@extend .new;
						background:url(../image/shop/hot.jpg) no-repeat;
						background-size:contain;
					}
					.bag{
						@extend .new;
						background:url(../image/shop/bag.jpg) no-repeat;
						background-size:contain;
					}
					.shoes{
						@extend .new;
						background:url(../image/shop/shoes.jpg) no-repeat;
						background-size:contain;
					}
					.acc{
						@extend .new;
						background:url(../image/shop/acc.jpg) no-repeat;
						background-size:contain;
					}
					.socks{
						@extend .new;
						background:url(../image/shop/socks.jpg) no-repeat;
						background-size:contain;
					}
					.hat{
						@extend .new;
						background:url(../image/shop/hat.jpg) no-repeat;
						background-size:contain;
					}
					.glass{
						@extend .new;
						background:url(../image/shop/glass.jpg) no-repeat;
						background-size:contain;
					}
					.skincare{
						@extend .new;
						background:url(../image/shop/skincare.jpg) no-repeat;
						background-size:contain;
					}
					.makeup{
						@extend .new;
						background:url(../image/shop/makeup.jpg) no-repeat;
						background-size:contain;
					}
					.underwear{
						@extend .new;
						background:url(../image/shop/underwear.jpg) no-repeat;
						background-size:contain;
					}
					.daigou{
						@extend .new;
						background:url(../image/shop/daigou1.jpg) no-repeat;
						background-size:contain;
					}
					.iphone{
						@extend .new;
						background:url(../image/shop/iphone.jpg) no-repeat;
						background-size:contain;
					}
					.garden{
						@extend .new;
						background:url(../image/shop/garden1.jpg) no-repeat;
						background-size:contain;
					}
					.zakka{
						@extend .new;
						background:url(../image/shop/zakka.jpg) no-repeat;
						background-size:contain;

					}
					.gift{
						@extend .new;
						background:url(../image/shop/gift.jpg) no-repeat;
						background-size:contain;
					}
					.stationery{
						@extend .new;
						background:url(../image/shop/stationery.jpg) no-repeat;
						background-size:contain;
					}
					.homedecor{
						@extend .new;
						background:url(../image/shop/homedecor1.jpg) no-repeat;
						background-size:contain;
					}
					.toy{
						@extend .new;
						background:url(../image/shop/toy1.jpg) no-repeat;
						background-size:contain;
					}
					.food{
						@extend .new;
						background:url(../image/shop/food.jpg) no-repeat;
						background-size:contain;
					}
					.diy{
						@extend .new;
						background:url(../image/shop/diy.jpg) no-repeat;
						background-size:contain;
					}
				}
			}
		}
	}
}

//设置底部
footer{
	width:95%;
	margin-left:30px;
	// width:1157px;
	.link{
		border-top:1px dotted #ea84ba;
		border-bottom:1px dotted #ea84ba;
		.link-box{
			margin:10px 0 9px 0;
			span{
				padding:7px 16px 7px 0;
				display:inline-block;
				color:#999;
			}
			a{
				padding:7px 11px 7px 0;
				display:inline-block;
				color:#666;
			}
		}
	
	}
	.introduce{
		.introduce-box{
			margin:14px 0 14px;
			text-align:center;
			a{
				padding:8px 14px;
				color:#666;
			}
		}
	}
	.copyrights{
		text-align:center;
		margin-bottom:20px;
		span{
			margin-right:5px;
		}
		a,b,i{
			margin-right:10px;
		}
		span,b,i{
			color:#999;
		}
		a{
			color:#666;
		}
		
	}
}
//媒体查询
@media (max-width:1024px) {
	#wrap{
		background:none;
	}
	#top-box{
		margin-left:0;
	}

	header{
		position:static;
		width:100%;
		#logo{
			width:100%;
			.logo1{
				width:32.75154004106776%;
				display:block;
				float:left;
			}
			.logo2{
				width: 61.19096509240246%;
				display:block;
				float:right;
			}
		}
		#nav{
			ul{
				border-top:1px solid #eee;
				border-bottom:1px solid #eee;
				width:100%;
				margin-bottom:20px;
				li{
					float:left;
					margin-right:1.9%;
					border-bottom:none;
					.mediaChange{
						margin-left:0;
					}
					.mediaChange:hover{
						margin-left:0;
					}
					.recommend.active,.trend.active,.diy.active,.health.active{
						margin-left:0;
					}
				}
				li:hover{
					border-left:none;
				}
				.page-li{
					border-top:none;
				}
				// 选项卡
				.recommend-option{
					// display:none;
					background:#fff;
					width: 150%;
	    			top:100%;
	    			border:1px solid #eee;
	    			border-top:1px solid #fff;
	   				left:-16px;
	   			
					li{
						height:40px;
						line-height:40px;
						text-align:center;
						border-bottom:none;
						border-left:none;
						border-right:none;
						
						a{
							padding-left:35px;
						}
						a:last-child{
							padding-left:15px;
						}
					}
					li:first-child{
	   					border-top:none;
	   				}
	   				li:last-child{
	   					border-bottom:none;
	   				}
				}
			}
			.attention{
				display:none;
			}
		}
	} 
	section{
		width:100%;
		.top{
			.t-img{
				display:none;
			}
		}
	}
	footer{
		margin-left:0;
	}
}
@media (max-width:881px){
	header{
		width:100%;
		#nav{
			ul{
				width:100%;
				li{
					margin-right: 2.45%;
					float:left;
					.mediaChange{
						background:none;
						padding-left:0;
					}
					.mediaChange:hover{
						background:none;
						padding-left:0;
					}
					.recommend.active,.trend.active,.diy.active,.health.active{
						background:none;
						padding-left:0;
					}
				}
				.page-li{
					border-top:none;
				}
				.recommend-option{
					width:180%;
					left:-40%;
				}
			}
			.attention{
				display:none;
			}
		}
	} 
	section{
		width:100%;
		.top{
			.t-img{
				display:none;
			}
		}
	}
}
@media (max-width:640px){
	#collapse{
		.toggle{
			right:0;
			display:block;
		}
	}
	header{
		width:100%;
		#logo{
			width:100%;
		}
		#nav{
			display:none;
		}
	} 
	section{
		.top{
			.t-img{
				display:none;
			}
		}
		.content{
			.ele{
				ul{
					li{
						width:75%;
					}
				}
			}
		}
	}
	footer{
		.introduce{
			.introduce-box{
				a{
					color:#fff;
					background:#ea84ba;
				}
			}
		}
	}
}